<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="form-group">
	<label class="col-sm-2 control-label">属性：</label>
	<div class="col-sm-8" id="property"></div>
</div>
<div id="hidehtml" style="display:none;">
	<div class="row" style="margin-top:5px;">
		<div class="col-sm-4">
		<input class="form-control" type="text" readonly value="{pkey}">
		</div>
		<div class="col-sm-6">					
		<input class="form-control" type="text" readonly value="{pvalue}">						
		</div>	
		<div class="col-sm-2"><a class="btn btn-primary deleteproperty" onclick="deleteProperty('{_pkey}');">删除属性</a></div>
	</div>	
</div>
<div class="modal fade" id="myModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><i class="fa fa-close"></i></span>
				</button>
				<h4 class="modal-title">添加属性</h4>
			</div>
			<div class="modal-body" id="propertype">
				<div class="form-group">
					<label class="col-sm-3 control-label">
						属性类型：
					</label>
					<div class="col-sm-9">
						<select class="form-control" id="changetype">
							<option value="1">
								选择器
							</option>
							<option value="2">
								定值
							</option>
							<option value="3">
								栏目
							</option>
							<option value="4">
								标记
							</option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">
						栏目：
					</label>
					<div class="col-sm-9">
						<select class="form-control">
							<c:forEach items="${cate}" var="v">
							<option value="${v.id}">${v.title}</option>
							</c:forEach>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">
						标记：
					</label>
					<div class="col-sm-9">
						<div class="checkbox">
							<c:forEach items="${mark}" var="m">
							<label class="checkbox-inline">
								<input type="checkbox" value="${m.title}">
								<span class="lbl">
									${m.title}
								</span>
							</label>
							</c:forEach>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">
						key：
					</label>
					<div class="col-sm-9">
						<input class="form-control" type="text" value=""/>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">
						value：
					</label>
					<div class="col-sm-9">
						<input class="form-control" type="text" value=""/>
					</div>
				</div>	
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal" id="saveproperty">
					<i class="fa fa-check"></i> 确认
				</button>
			</div>
		</div>
	</div>
</div>
<script>
var property=${property};

function deleteProperty(pkey){
	for(var i=0;i<property.length;i++){
		var _pkey=property[i].pkey;
		if(pkey==_pkey){
			property.splice(i,1);
		}
	}
	bootstrap();
}

function bootstrap(){	
	var html="";
	for(var i=0;i<property.length;i++){
		var pkey=property[i].pkey;
		var pvalue=property[i].pvalue;
		var str=$("#hidehtml").html();
		str=str.replace("{pkey}",pkey);
		str=str.replace("{_pkey}",pkey);
		str=str.replace("{pvalue}",pvalue);	
		html+=str;
	}
	$("#property").html(html);
	myform.put("property",JSON.stringify(property));
}

function checkTemp(id){
	location.href="${APP}admin/cmstool/collect?id="+id
}

$(function(){
	$("#changeTemp").click(function(){
		layer.open({
		      type: 2,
		      title: '<i class="fa fa-check-square"></i> 选择模板',
		      maxmin: true,
		      shadeClose: true, //点击遮罩关闭层
		      area : ['600px' , '500px'],
		      content: '${APP}admin/cmstool/TempList'
		});
	});	
	
	$("#addpropery").click(function(){
		$('#myModal').modal('toggle');
	});	
	
	$("#saveproperty").click(function(){		
		var changetype=$("#changetype").val();
		var pkey;
		var pvalue;
		if(changetype==1){
			pkey=$("#propertype input[type=text]")[0].value;
			pvalue="/"+$("#propertype input[type=text]")[1].value+"/";			
		}
		if(changetype==2){
			pkey=$("#propertype input[type=text]")[0].value;
			pvalue=$("#propertype input[type=text]")[1].value;	
		}
		if(changetype==3){
			pkey="itemId";
			pvalue=$("#propertype select")[1].value;
		}
		if(changetype==4){
			var t=[];
			$("#propertype input[type='checkbox']").each(function(){
				var c=this.checked;
				if(c){
					t.push(this.value);
				}
			});
			pkey="labels";
			pvalue=t.join(",");
		}
		var c=check(pkey);
		if(c)return;			
		var obj={pkey:pkey,pvalue:pvalue};
		property.push(obj);
		bootstrap();
	});
	
	function check(key){
		var check=false;
		$("#property input[name='pkey']").each(function(){
			var v=$(this).val();
			if(key==v){
				layer.msg("key不能重复");
				check=true;
			}
		});
		return check;
	}
	
	function propertype(i){
		$("#propertype>.form-group").hide();
		$($("#propertype>.form-group")[0]).show();
		if(i==1 || i==2){
			$($("#propertype>.form-group")[3]).show();
			$($("#propertype>.form-group")[4]).show();
		}
		if(i==3){
			$($("#propertype>.form-group")[1]).show();
		}
		if(i==4){
			$($("#propertype>.form-group")[2]).show();
		}	
	}
	propertype(1);
	
	$("#changetype").change(function(){
		var i=$(this).val();
		propertype(i);
	});
	
	$("input[type='radio']").change(function(){	
		var v=this.value;
		showCollect(v);
	});

	function showCollect(v){
		if(v==1){
			$($(".form-group")[1]).show();
			$($(".form-group")[1]).children("label").html("起始网页地址：");
			$($(".form-group")[3]).hide();
			$($(".form-group")[4]).hide();
		}
		if(v==2){
			$($(".form-group")[1]).hide();
			$($(".form-group")[3]).show();
			$($(".form-group")[4]).show();		
		}
		if(v==3){
			$($(".form-group")[1]).show();
			$($(".form-group")[1]).children("label").html("指定网页地址：");
			$($(".form-group")[3]).hide();
			$($(".form-group")[4]).hide();
		}
	}
	showCollect(${type});

	$("#stop").click(function(){
		 $("input,select,textarea").attr("disabled",false);
		 $("#start>i").removeClass("fa-spin");
		 $.get("${APP}admin/cmstool/stopCollect",function(res){
			 layer.msg(res.msg);
		 });
	});
	
	$("#pause").click(function(){
		 $("#start>i").removeClass("fa-spin");
		 $.get("${APP}admin/cmstool/pauseCollect",function(res){
			 layer.msg(res.msg);
		 });
	});
	
	$("#start").click(function(){	
		document.myform.action="${APP}admin/cmstool/saveCollect";
		myform.submit(function(res){
			if(res.code==1){
				$("input,select,textarea").attr("disabled",true);
				$("#start>i").addClass("fa-spin");
			}
			layer.msg(res.msg);			
		});		
	});
	
	$("#saveTemp").click(function(){
		document.myform.action="${APP}admin/cmstool/saveTemp";
		var title =prompt("提示","请在此输入模板标题");
		if(!title){
			layer.msg("标题不能为空");		
			return;
		}
		myform.put("title",title);
		myform.submit(function(res){
			layer.msg(res.msg);			
		});
	});
	
	parent.wsInit(function(res){
		if(res.type=='alert'){
			alert.msg(res);
		}
		if(res.type=='layer'){
			layer.msg(res.content);
			 $("input,select,textarea").attr("disabled",false);
			$("#start>i").removeClass("fa-spin");
		}
	});
	
	bootstrap();
});
</script>